<template>
  <el-card shadow="never">
    <template #header>
      <div>
        <span>{{ $t("form.lottery.title") }}</span>
        <span class="desc-text ml10">{{ $t("form.lottery.desc") }}</span>
      </div>
    </template>
    <div class="p10">
      <div class="fun-item">
        <div class="name">
          <el-icon
            class="mr5"
            size="18"
          >
            <TablerBrandWechat />
          </el-icon>
          {{ $t("form.lottery.wechatReward") }}
        </div>
        <el-button
          bg
          size="default"
          text
          type="primary"
          @click="wechatDialogVisible = true"
        >
          {{ $t("form.lottery.redPacketSettings") }}
        </el-button>
      </div>
      <div class="fun-item">
        <div class="name">
          <el-icon
            class="mr5"
            size="18"
          >
            <ele-Present />
          </el-icon>
          {{ $t("form.lottery.customLottery") }}
        </div>
        <el-button
          bg
          size="default"
          text
          type="primary"
          @click="dialogVisible = true"
        >
          {{ $t("form.lottery.lotteryInfo") }}
        </el-button>
      </div>
    </div>

    <el-dialog
      v-model="dialogVisible"
      :title="$t('form.lottery.lotterySetting')"
      width="60%"
    >
      <el-tabs
        v-model="activeName"
        v-if="dialogVisible"
      >
        <el-tab-pane
          :label="$t('form.lottery.tab1Name')"
          name="sendNotify"
        >
          <lottery-config />
        </el-tab-pane>
        <el-tab-pane
          :label="$t('form.lottery.tab2Name')"
          name="winningRecord"
        >
          <winning-record v-if="activeName === 'winningRecord'" />
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 添加微信红包设置弹窗 -->
    <wechat-reward-config v-model:visible="wechatDialogVisible" />
  </el-card>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import LotteryConfig from "./LotteryConfig.vue";
import WinningRecord from "./WinningRecord.vue";
import WechatRewardConfig from "./WechatReward/index.vue";
import TablerBrandWechat from "~icons/tabler/brand-wechat";

const activeName = ref("sendNotify");
const dialogVisible = ref(false);
const wechatDialogVisible = ref(false);
</script>

<style lang="scss" scoped>
.fun-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 80%;
  padding-left: 20px;
  margin-bottom: 20px;

  .name {
    font-size: 14px;
    font-weight: 500;
    color: var(--el-text-color-primary);
    display: flex;
    align-items: center;
  }

  .desc-text {
    font-size: 12px;
    color: #999;
  }
}
</style>
